import {Component, OnInit, ViewEncapsulation, ViewChild, EventEmitter, Output, Input, Renderer} from '@angular/core';
import {SeedInfiniteScroll} from "@shared/components/infinite-scroll/seed-infinite-scroll/seed-infinite-scroll.component";
import {ImageServeService} from "@shared/service/image/image-serve.service";
import {EventsService} from "@core/events/events.service";

import {Content} from "@shared/components/toolbar/toolbar-content";
import {ModalComponent} from "@shared/components/modal/modal.component";
import {Router} from "@angular/router";
import {DynamicFormDefault, MatchSignupFieldsResp} from "@interface/index";
// import {MatchSignupFieldsResp} from "@interface/match/match.model";
// import {DynamicFormDefault} from "@interface/shared/shared.model";


@Component({
  selector: 'sign-up-list',
  templateUrl: './sign-up-list.component.html',
  styleUrls: ['./sign-up-list.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class SignUpListComponent implements OnInit {

  public icon: string;
  public unchose: string;
  public chosed: string;
  public manIcon: string;
  public womanIcon: string;
  public agree = true;
  public hasData = false;
  public page = 1;
  public hasChoose: Array<number> = [];
  public _addition: MatchSignupFieldsResp[];
  public showArr: Array<any>;
  public allArr: Array<DynamicFormDefault> = [];
  public showModal = false;
  public chooseIndex: number;
  public contactDefault: DynamicFormDefault;
  public params: {
    matchId: string;
    orderNumber: string;
    channelsId: string;
    groupType: string;
  };
  public showProtocol = false;

  @Input()
  set addition(val) {
    this._addition = val;
  }

  get addition() {
    return this._addition;
  }

  @Output() submit: EventEmitter<any> = new EventEmitter();
  @ViewChild(Content) content;
  @ViewChild(SeedInfiniteScroll) infiniteScroll;
  @ViewChild(ModalComponent) modal;

  constructor(
    private imgService: ImageServeService,
    public events: EventsService,
    private renderer: Renderer,
    private route: Router
  ) {
    this.unchose = this.imgService.getChoseStatus('unselect');
    this.chosed = this.imgService.getChoseStatus('selected');
    this.manIcon = this.imgService.getSexIcon('man');
    this.womanIcon = this.imgService.getSexIcon('woman');
  }


  getMoreMember() {
    setTimeout(() => {
      this.infiniteScroll.complete();
      this.page++;
      this.showArr = this.allArr.slice(0, this.page * 10);
      if (this.showArr.length === this.allArr.length) {
        this.infiniteScroll.enable(false);
      }
    }, 500);
  }

  choose(i: number, event: any) {
    if (this.hasChoose.indexOf(i) !== -1) {
      const temp = this.hasChoose.filter(item => {
        return item !== i;
      });
      this.hasChoose = temp;
    } else {
      this.hasChoose.push(i);
    }
  }

  agreeChange() {
    this.agree = !this.agree;
  }

  gotoProtocol() {  // 去协议界面
    // this.route.navigate(['/sign-up/sign-up-protocol']);
    this.modal.show();
    this.showProtocol = true;
  }

  /**
   * @description 去编辑联系人界面
   * @param addNew 是否新建联系人
   * @param id 联系人Id，如果是新建联系人则无
   */
  goEditPage(i: number) {
    if (i >= 0) {
      this.contactDefault = this.allArr[i];
      this.chooseIndex = i;
    }
    // this.events.publish('modal:show');
    this.modal.show();
    this.showModal = true;

  }

  reset() {
    this.page = 1;
    this.showArr = this.allArr.slice(0, this.page * 10);
    this.chooseIndex = -1;
    this.contactDefault = null;
    this.showModal = false;
    this.allArr.length > 0 ? this.hasData = true : this.hasData = false;
    this.hasChoose = [];
    this.content.scrollTop();
    this.allArr.length > 9 ? this.infiniteScroll.enable(true) : this.infiniteScroll.enable(false);
    this.showProtocol = false;
  }

  saveForm(item) {
    if (this.chooseIndex >= 0) {
      this.allArr.splice(this.chooseIndex, 1, item);
    } else {
      this.allArr.unshift(item);
      // console.log(this.allArr);
    }
    this.modal.hide();
    this.modal.goBack();
    this.reset();
  }

  delCustomer() {
    this.allArr.splice(this.chooseIndex, 1);
    this.modal.hide();
    this.modal.goBack();
    this.reset();
  }

  sign() {
    const chooseArr = [];
    this.hasChoose.forEach(e => {
      chooseArr.push(this.allArr[e]);
    });
    this.submit.emit(chooseArr);

  }

  popstateHandler() {
    this.reset();
  }

  ngOnInit() {
    this.renderer.listenGlobal('window', 'popstate', this.popstateHandler.bind(this));
  }

  ngOnDestry() {

  }

}
